<template>
  <ex-dialog width="800px" class="ex-diolog" :title="title" :visible="visible" :close-on-click-modal="true"
    @closeDialog="handleClose">
    <div class="main" v-loading="loading">
      <div class="dia_head">
        <span>日期</span>
        <span>使用情况</span>
      </div>
      <div v-if="useList.length==0" style="text-align: center;padding-top:10px">暂无数据</div>
      <div class="dia_detail" v-for="(item,index) in useList" :key='index'>
        <div class="dia_detail_l">{{item.useTime}}</div>
        <div class="dia_detail_r">
          <span style="margin-right: 10px">{{item.typeDict}}</span>
          <span v-if="item.cardType==1||item.cardType==3||item.cardType==6">{{item.symbol}}{{item.changValue}}</span>
          <span v-if="item.cardType==2||item.cardType==5||item.cardType==8">{{item.symbol}}{{item.changValue}}次</span>
          <span v-if="item.cardType==4">{{item.symbol}}{{item.changValue}}课时</span>
          <span v-if="item.cardType==9">到店</span>
        </div>
      </div>
    </div>
  </ex-dialog>
</template>
<script>
  import Loading from "@/components/Loading/index";
  // api
  import {
    cardBillLs,
  } from "@/api/moneyManagement";

  export default {
    components: {
      Loading,
    },
    props: {
      visible: Boolean,
      customerCardId: String,
      customerId: String,
    },
    data() {
      return {
        labelWidth: '100px',
        inputWidth: '300px',
        title: '卡使用记录',
        loading: false,
        useList:[], //使用记录
      };
    },
    computed: {},
    created() {},
    mounted() {
        this.getInfo()
    },
    methods: {
      //取消
      handleClose(formName) {
        this.$emit("update:visible", false);
      },
      getInfo() { //获取信息
        let data = {
            customerCardId: this.customerCardId,
            customerId: this.customerId
        }
        cardBillLs(data).then((res) => {
          res.result.forEach((item) => {
            if (item.type == 5 || item.type == 9 || item.type == 11) {
              item.symbol = "-";
            }
            else if(item.type==''){
              item.symbol = "-";
            }
            else {
              item.symbol = "+";
            }
          });
          this.useList = res.result
        })
      },
    },
  };

</script>
<style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
      padding: 0 !important;
    }

    ::v-deep .ex--dialog--main {
      padding: 10px 20px !important;
    }
  }

  .main {
    padding: 20px 0 30px;
  }

  .dia_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
  }

  .dia_detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    margin-bottom: 24px;
  }

</style>
